import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore('app', () => {
  // 侧边栏折叠状态
  const collapsed = ref(false)
  
  // 设备类型
  const device = ref<'desktop' | 'tablet' | 'mobile'>('desktop')
  
  // 主题
  const theme = ref<'light' | 'dark'>('light')
  
  // 移动端侧边栏显示状态
  const mobileMenuVisible = ref(false)

  // 切换侧边栏折叠状态
  const toggleCollapsed = () => {
    collapsed.value = !collapsed.value
  }

  // 设置设备类型
  const setDevice = (deviceType: 'desktop' | 'tablet' | 'mobile') => {
    device.value = deviceType
    
    // 根据设备类型自动调整侧边栏状态
    if (deviceType === 'mobile') {
      collapsed.value = true
    } else if (deviceType === 'tablet') {
      collapsed.value = true
    } else {
      collapsed.value = false
    }
  }

  // 切换主题
  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }

  // 切换移动端菜单显示状态
  const toggleMobileMenu = () => {
    mobileMenuVisible.value = !mobileMenuVisible.value
  }

  // 关闭移动端菜单
  const closeMobileMenu = () => {
    mobileMenuVisible.value = false
  }

  return {
    collapsed,
    device,
    theme,
    mobileMenuVisible,
    toggleCollapsed,
    setDevice,
    toggleTheme,
    toggleMobileMenu,
    closeMobileMenu
  }
}, {
  persist: {
    key: 'app-store',
    storage: localStorage,
    paths: ['collapsed', 'theme']
  }
})